<template>
  <div id="sign-manager">
    <sign-model @selected-user="selectedUser" title="人员签到">
      <div class="text-right">
        <el-date-picker class="mb-3" @change="changeDate" v-model="date" type="month" format="yyyy 年 MM 月"
          value-format="yyyy-MM" placeholder="选择年月">
        </el-date-picker>
        <vue-cal :hideTitleBar="true" :hideViewSelector="true" locale="zh-cn" :selected-date="date + '-01'"
          :time-from="9 * 60" :disable-views="['week', 'day']" default-view="month" @day-click="selectDay"
          events-on-month-view="short" :events="events" :style="{height: bodyHeight + 'px'}">
        </vue-cal>
      </div>
    </sign-model>
    <el-dialog title="签到详情" :visible.sync="dialogVisible">
      <form>
        <div v-for="(ev, index) in event" :key="index">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label text-right">签到时间：</label>
            <div class="col-sm-9 pt-2">
              <span class="col-form-label">{{ ev.dateTime }}</span>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-3 col-form-label text-right">签到地点：</label>
            <div class="col-sm-9 pt-2">
              <span>{{ ev.area }}</span>
            </div>
          </div>
          <div class="form-group row" v-viewer>
            <label class="col-sm-3 col-form-label text-right">照片对比：</label>
            <div class="col-sm-9 pt-2">
              <div class="d-inline-block">
                <img :src="ev.orgImgPath" style="height:200px;width:200px;text-align:center" />
                <p class="text-center">原照片</p>
              </div>
              <div class="d-inline-block ml-2">
                <img :src="ev.imgPath" style="height:200px;width:200px;text-align:center" />
                <p class="text-center">对比照片</p>
              </div>
            </div>
          </div>
        </div>

      </form>
    </el-dialog>
  </div>
</template>
<script>
import VueCal from "vue-cal";
import "vue-cal/dist/vuecal.css";
import SignModel from "./SignModel";
import axios from 'axios'

export default {
  name: "singmanager",
  title: "签到管理",
  components: { SignModel, VueCal },
  data() {
    return {
      events: [],
      dialogVisible: false,
      event: [],
      year: this.$formatYMD().substr(0, 4), // 存储当前选择的年份
      date: this.$formatYMD().substr(0, 7),
      user: {} // 存储当前选择的用户
    };
  },
  methods: {
    selectedUser(user) {
      // 判断为了过滤多次点击一个人而过多请求
      // if (this.user.id === user.id) {
      //   return
      // }
      this.user = user
      this.getEvents(user);
    },
    changeDate(d) {
      // 如果选择日期年份没有变动,或者没有选择用户,就不查询,只是跳转一下日历
      if (d.substring(0, 4) === this.year || !this.user.id) {
        this.date = d + '-01'
      } else {
        this.date = d + '-01'
        this.getEvents(this.user)
      }
      this.year = d.substring(0, 4)
    },
    selectDay(time) {
      let index = this.events.findIndex(item => {
        return item.event[0].dateTime.substr(0, 10) === this.$formatYMD(time);
      });
      if (index > -1) {
        this.event = this.events[index].event;
        this.dialogVisible = true;
      }
    },
    getEvents(user) {
      axios.get(`survey/signin/getByName?account=${user.account}&sigInDate=${this.date.substr(0, 4)}&areaId=${user.areaId}`).then(res => {
        if (res.data.code === "200") {
          if (res.data.data.length === 0) {
            this.$message(
              `${user.name}在${this.date.substr(0, 4)}年没有签到记录`
            );
            this.events = []
            return;
          }
          this.setEvents(res.data.data);
        } else {
          this.$codeError(res);
        }
      }).catch(error => {
        this.$catchError(error);
      });
    },
    // 现在有多次签到，需要将一天内的签到累积到一个里面，并标记数量
    setEvents(events) {
      this.events = []
      events.forEach(item => {
        let index = this.findEvent(this.events, item)
        if (index >= 0) {
          this.events[index].event.push(item)
          this.events[index].title = `签到(${this.events[index].event.length})`
        } else {
          this.events.push({
            start: item.dateTime.substr(0, 10),
            end: item.dateTime.substr(0, 10),
            title: "*签到(1)",
            class: "sport",
            event: [item]
          })
        }
      });
    },
    // 比较两个事件是不是同一天
    findEvent(events, event) {
      return events.findIndex(item => item.start === event.dateTime.substr(0, 10))
    }
  },
  computed: {
    bodyHeight() {
      return document.body.clientHeight - 80 - 60 - 120;
    }
  },
};
</script>
<style lang="scss">
#sign-manager {
  .vuecal__event {
    color: #fff;
    background-color: #17a2b8 !important;
  }
}
</style>
